<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="../dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <!-- <h1 class="text-3xl font-bold my-custom-style text-softPurple">Hello world!</h1>

    <img src="/imgs/lb.png" alt="" class="sm:ml-[50px]" /> -->
    <!-- mx-auto :margin 居中 -->
    <nav class="relative container mx-auto mt-3">
      <div class="flex item-center justify-between">
        <!-- logo -->
        <div class="pt-2">
          <img src="../imgs/logo.svg" alt="" />
        </div>

        <!-- menu items -->
        <!-- margin-left: 4.5rem; Utilities for controlling the space between child elements. -->
        <div class="hidden md:flex item-center space-x-6 font-semibol">
          <a href="#" class="hover:text-sp">Pricing hello?</a>
          <a href="#" class="hover:text-sp">Pro</a>
          <a href="#" class="hover:text-sp">contact</a>
          <a href="#" class="hover:text-sp">links</a>
          <a href="#" class="hover:text-sp">apple</a>
          <a href="#" class="hover:text-sp">Yes</a>
        </div>

        <a href="#" class="hidden md:block text-white b-2 px-6 bg-[#ee5533] rounded-full hover:bg-br leading-[29px]">get Start</a>

        <!-- 汉堡菜单 -->
        <label class="flex flex-col ham_menu z-20">
          <input type="checkbox" class="block before: md:hidden" />
        </label>

        <div class="slider hidden fixed flex-row w-[100vw] top-0 right-0">
          <input type="checkbox" class="l appearance-none checked: opacity-60 bg-black blur-lg w-[60%]" />
          <div class="r w-[40%] bg-gray-800 overflow-y-scroll h-[100vh]">
            <p>apple</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
            <p>menu2</p>
          </div>
        </div>
      </div>

      <!-- hero section -->

      <section id="hero">
        <div class="container flex flex-col md:flex-row items-center px-6 mx-auto mt-10 space-y-0">
          <!-- left items -->

          <div class="flex flex-col mb-8 space-y-12 md:w-1/2">
            <!-- 	max-width: 28rem; /* 448px */ -->
            <h1 class="max-w-xl text-4xl font-bold text-center md:text-5xl md:text-left">
              Bring everyone together to build better products.
            </h1>

            <p class="max-w-xl text-center text-gray1 md:text-left">
              Manage makes it simple for software teams to plan da-to-day tasks while keeping th e larger team goals in view
            </p>

            <div class="flex items-center justify-center md:justify-start">
              <a href="#" class="md:block text-white b-2 px-6 bg-[#ee5533] rounded-full hover:bg-br leading-[29px]">get Start</a>
            </div>
          </div>

          <div class="md:w-1/2">
            <img src="/imgs/illustration-intro.svg" alt="大图片" />
          </div>
        </div>
      </section>

      <!-- section features -->

      <section id="features" class="flex-col md:flex md:flex-row mt-10">
        <!-- what differnt  -->
        <div class="felx md:w-1/2 container mb-8 flex-col px-4 ma-auto space-y-12 md:space-y-0 md:flex-row">
          <p class="font-bold mb-8 text-center text-4xl md:text-left">what different about Manage？</p>

          <p class="text-gray1">
            Manage makes it simple for software teams to plan da-to-day tasks while keeping th e larger team goals in view
          </p>
        </div>

        <!-- 右边的选项 -->
        <div class="flex flex-col md:w-1/2 mx-2 space-y-2">
          <div class="flex flex-row">
            <div class="md:block h-[30px] text-white b-2 px-6 bg-[#ee5533] rounded-full hover:bg-br leading-[29px]">01</div>
            <div class="ml-4">
              <p class="font-bold text-1xl">track compan-wide progress</p>

              <p class="text-gray1">
                let me write some word Manage makes it simple forasd software teams to plan da-to-day tasks while keeping th e
                larger team goals in view
              </p>
            </div>
          </div>

          <div class="flex flex-row">
            <div class="md:block h-[30px] text-white b-2 px-6 bg-[#ee5533] rounded-full hover:bg-br leading-[29px]">02</div>
            <div class="ml-4">
              <p class="font-bold text-1xl">track compan-wide progress</p>

              <p class="text-gray1">
                let me write some word Manage makes it simple forasd software teams to plan da-to-day tasks while keeping th e
                larger team goals in view
              </p>
            </div>
          </div>
        </div>
        <!-- track company item withe 2 -->
      </section>
    </nav>
  </body>
</html>
